﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=7" />
<title>花间语</title>
<link href="/static/index/css/css_whir.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="/static/index/font/iconfont.css">
<link href="/static/index/css/user.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="/static/index/js/jquery.min.js"></script>
<script type="text/javascript"  src="/static/index/js/nav.js"></script>
<script type="text/javascript" src="/static/index/js/jquery.SuperSlide.2.1.1.js"></script>
<script type="text/javascript" src="/static/index/js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="/static/index/js/bootstrap.min.js"></script>
<link href="/static/index/css/toastr.min.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="/static/index/js/toastr.min.js"></script>
<style>
  .li{
    width: 180px;
    /* height: 600px; */
    float:left;
    margin-right:20px;
    margin-bottom:40px;
  }
  .pic1{
    width: 180px;
    /* height: 600px; */
  }

  /*将主容器的布局方式设置为相对布局*/
/*   .contianer{display:flex;
            flex-direction:column;
            align-items:center;
            background-color: #b3d4db;} */

  #box{padding: 5px;
      float: left;}


  /*将承载图片的容器定制颜色及边框大小和圆角*/
  .boximg{
      padding: 5px; ,
      box-shadow: 0 0 5px #ccc;
      border: 1px solid #cccccc;
      border-radius: 5px;
      position: relative;
      overflow: hidden;
      transition: all .5s;
  }


  /*定制图片尺寸*/
  .boximg .bigimg{
      width: 233px;
      height: auto;
  }


  .user_icon{float:right;margin-top:20px;margin-left:5px;}


</style>
</head>
<body>
<!--头部-->
<div id="header">
  <div class="top_bg">
    <div class="logo"><a href="#"><img src="/static/index/imgs/logo.jpg" width="150" height="90" /></a></div>
    <div class="top">
      <!--导航-->
      <!-- {block name="header"} -->
      <div class="guide">
        <div class="welcom">Welcome to fantasy_dream !　</div>
        <div class="login">

            {empty name="session"}
            <a href="{:url('index/Login/index')}">登录</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <a href="{:url('index/Register/index')}">注册</a>
            {else /}

            {empty name="session.name"}

            <a href="{:url('index/User/index')}" title="进入{$session.tel}主页"> | 您好,{$Request.session.hmy_user.tel}</a>

            {else /}

            <a href="{:url('index/User/index')}" title="进入{$session.name}主页"> 您好,{$Request.session.hmy_user.name}</a>

            {/empty}

             &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="{:url('index/Login/outlogin')}">注销</a>

             {/empty}
        </div>
        <!-- <div class="shopcart">购物车（<a href="会员中心.html">0</a>）</div> -->
        <div class="searchbox">
          <form action="{:url('index/Index/online')}">
            <input type="text" value="" name="name" class="input" />
            <input type="image" src="/static/index/imgs/sbtn.jpg"  class="btn"/>
          </form>
        </div>
      </div>
      <!-- {/block} -->
      <!--菜单导航-->
      <div class="nav">
        <ul id="navul" class="cl">
          <li><a href="{:url('index/index/index')}">首页</a></li>
          {volist name="category" id="v"}
          <li class="navmenu"><a href="{:url('index/Index/lists',['id'=>$v['id']])}">{$v['name']}</a>
          </li>
          {/volist}
        </ul>
    <script type="text/javascript">

             $(document).ready(function(){
            //  $('.hyinfo li ').hover(function(){$(this).find('.subbox').stop(true,true).slideToggle(); });
              $('.navmenu').mouseenter(function(){

            $(this).find('.subnav').css("display","block");//you can give it a speed

              });
              $('.navmenu').mouseleave(function(){
            $(this).find('.subnav').css("display","none");

              //jQuery(this).css("background-image", "none");

              });

            });

        </script>
      </div>
    </div>
  </div>
</div>

{block name="main"}
<!--中间内容-->
<div class="hymain">
  <div class="position">您当前的位置：<em>他的全部作品({$list_num})</em></div>
  <!--左侧菜单-->


{empty name="list"}
  <font align="center" size="4">这家伙很懒,他还没有作品....</font>
  {else /}

      <div class="picshow">
      <div class="container" id="container" style="width:1274px;float:left;">
        {volist name="list" id="v"}
              <div id="box" class="box">
                  <div class="boximg" style="width:188px">
                      <a href="{:url('index/Picture/detail',['id'=>$v['id']])}">
                        <img src="http://pn5tyoo5a.bkt.clouddn.com/{$v.src}" class="bigimg" style="width:188px">
                      </a>
                    <div id="user">
                      <span style="line-height: 50px;">
                          {if condition="$v.status eq 1"}
                          <font color="green" size="2"><strong>待审核</strong></font>
                          {else /}
                            {if condition="$v.status eq 2"}
                            <font color="green"><strong>审核通过</strong></font>
                            {else /}
                            <font color="red"><strong>审核未通过</strong></font>
                            {/if}
                          {/if}
                      </span>
                      <a href="{:url('index/Picture/detail',['id' => $v['id']])}" class="user_icon">收藏</a>
                    </div>
                  </div>
              </div>
          {/volist}
      </div>
    </div>
  </div>
{/empty}



<script type="text/javascript">
$(document).ready(function(){

  $("#leftsead a").hover(function(){
    if($(this).prop("className")=="youhui"){
      $(this).children("img.hides").show();
    }else{
      $(this).children("img.hides").show();
      $(this).children("img.shows").hide();
      $(this).children("img.hides").animate({marginLeft:'0px'},'slow');
    }
  },function(){
    if($(this).prop("className")=="youhui"){
      $(this).children("img.hides").hide('slow');
    }else{
      $(this).children("img.hides").animate({marginLeft:'-143px'},'slow',function(){$(this).hide();$(this).next("img.shows").show();});
    }
  });

  $("#top_btn").click(function(){if(scroll=="off") return;$("html,body").animate({scrollTop: 0}, 600);});

});
</script>
    <script src="/static/admin/assets/js/jquery-1.8.3.min.js"></script>
    <script>
            function del_pic(obj,id){
              console.log(obj);

                $.ajax({
                    url:"del_pic",
                    Type:'get',
                    data:{id:id},
                    dataType:'json',
                    success:function(data){

                      if (data.status) {

                          toastr.success(data.msg);
                          window.location.reload();

                      } else {

                          toastr.error(data.msg);

                      }

                    },
                    error:function(data){

                        toastr.error('系统故障,请联系管理员');

                    }
                });


            }

    </script>

    <script>
  window.onload = function(){

    waterFlow("container", "box");

  }


  function waterFlow(parent, chirld){

      var wparent = document.getElementById(parent);//获取父级div, 最外级容器

      var allArr = getAllChirld(wparent,chirld);//获取到所有的class为box的容器div

      var wscreenWidth = document.documentElement.clientWidth;//获取屏幕宽度

      var wchirldWidth = wparent.getElementsByTagName("*");//获取所有的标签

      var num = Math.floor(wscreenWidth/wchirldWidth[0].offsetWidth);//这是一个Math算法, 目的是将小数转变为整数,

      // 从而可以知道每行最多容纳几张图片
      wparent.style.cssText = 'width:'+wchirldWidth[0].offsetWidth*num+'px;margin:0 auto';//固定每行摆放个数 和上下左右边距
      // wparent.style.cssText = 'width:1274px;margin:0 auto';//固定每行摆放个数 和上下左右边距

      //获得每行的最小高度
      getMinHeightOfCols(allArr, num);

  }


  function getAllChirld(parent,classname){
      //获取所有的标签
      var wchirld = parent.getElementsByTagName("*");
      //创建数组
      var chirldArr = [];
      //遍历wchirld, 将其中className等于classname(传进来的参数)相同的标签放入数组chirldArr中
      for(var i = 0; i<wchirld.length; i++){
          if(wchirld[i].className==classname){
              //因为是位push所以没放进去一个, 都是在数组的最后一个
              chirldArr.push(wchirld[i]);
          }
      }
      //返回该数组
      return chirldArr;
  }


  function getMinHeightOfCols(chirdArr, num){
      //创建数组, 用来盛放每一行的高度
      var onlyOneColsArr = [];
      for(var i = 0; i<chirdArr.length; i++){

          if(i<num){
              //num为传进来的参数, 即为每行放图片的张数, 此步骤的目的是为了将第一行每张图片的高度遍历出来存放如新数组
              onlyOneColsArr[i]=chirdArr[i].offsetHeight;
          } else {
              //当大于每行存放的图片个数时进入该方法, Math.min.apply这个方法是为了得到数组中的最小值
              var minHeightOfCols = Math.min.apply(null, onlyOneColsArr);
              //此方法的目的是为了得到最小高度图片的下表, 也就是在每行的第几张, 具体方法见下面
              var minHeightOfindex = getminIndex(onlyOneColsArr, minHeightOfCols);
              //定义布局方式为绝对布局
              chirdArr[i].style.position = "absolute";
              //得到下一行图片应放的高度
              chirdArr[i].style.top = minHeightOfCols + "px";
              //得到下一行图片应放于那个位置
              chirdArr[i].style.left = chirdArr[minHeightOfindex].offsetLeft + "px";
              //将两张图片高度相加得到一个新的高度用来进行下一次的计算
              onlyOneColsArr[minHeightOfindex] += chirdArr[i].offsetHeight;
          }
      }

  }


  //此方法是为了进行最小高度下标的确定
  function getminIndex(onlyOneColsArr, min){
      //遍历传进来的高度数组
          for(var i in onlyOneColsArr){
              //如果高度等于最小高度, 返回i即为该图片下标
              if(onlyOneColsArr[i] == min){
                  return i;
              }
          }
  }


</script>

</body>
</html>
